<template>
  <div class="menu">
    <h3 class="h3-before">村民经营性自建房消防安全排查治理</h3>
    <h4>行政区划：{{ loginInfo.region }}</h4>
    <h4 v-if="[2, 3, 4, 5].includes(loginInfo?.roletype)">
      用户姓名：{{ loginInfo.nickName }}
      <van-icon name="edit" @click="onEdit" />
    </h4>
     <h4 v-if="[2, 3, 4, 5].includes(loginInfo?.roletype)">
      用户单位：{{ loginInfo.unitName }}
      <van-icon name="edit" @click="onUnitEdit" />
    </h4>
    <h4>当前用户编号：{{ loginInfo.uname || "-" }}</h4>
    <div class="nav">
      <div
        class="item"
        :key="item.name"
        v-for="item in list"
        @click="toPage(item)"
        v-show="!item.hide"
      >
        <van-image :src="item.icon" />
        <p class="font-weight" :style="{ color: item.bg }">{{ item.name }}</p>
      </div>
    </div>
    
    <component
      :is="phonePopup"
    />
    <van-popup v-model:show="editData.visible" round position="bottom">
      <div class="popup-box">
        <div class="title">
          <p @click="editData.visible = false">取消</p>
          <p>用户姓名</p>
          <p @click="onConfirm">确认</p>
        </div>
      </div>
      <input v-model="editData.name" placeholder="请输入用户姓名" />
    </van-popup>
    <van-popup v-model:show="editData.unitvisible" round position="bottom">
      <div class="popup-box">
        <div class="title">
          <p @click="editData.unitvisible = false">取消</p>
          <p>单位名称</p>
          <p @click="onUnitConfirm">确认</p>
        </div>
      </div>
      <input v-model="editData.unitname" placeholder="请输入所在单位名称" />
    </van-popup>

    <div
      class="change-role"
      v-if="[2, 3].includes(loginInfo.roletype)"
      @click="changeRole"
    >
      {{ `切换${loginInfo.roletype === 2 ? '区级' : loginInfo.roletype === 3 ? '市级' : '' }`  }}
    </div>

  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { reactive, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import {useLoginStore, useUserStore} from "@/store";
import {updateUserName, updateUnitName, weekNoCheckHouse, switchUser, userLogin} from "@/service/village";
import { Dialog, Toast } from "vant";
import phonePopup from '@/components/phonePopup.vue'

const loginStore = useLoginStore();
const userStore = useUserStore()

const { loginInfo } = storeToRefs(loginStore)
const { userInfo } = storeToRefs(userStore);

const router = useRouter();

const editData = reactive({
  visible: false,
  name: "",
  unitvisible:false,
  unitname:""
});
const list = ref([
  {
    name: "隐患检查",
    icon: require("./image/icon_1.png"),
    path: "inspection-building-list",
    bg: "#FF505A",
    hide: loginInfo.value?.roletype !== 5,
  },
  {
    name: "隐患核验",
    icon: require("./image/icon_6.png"),
    path: "verification-building-list",
    bg: "#FF8A49",
    hide: loginInfo.value?.roletype === 5,
  },
  {
    name: "隐患督办",
    icon: require("./image/icon_2.png"),
    path: "todo-list",
    bg: "#FFAE49",
  },
  {
    name: "检查记录",
    icon: require("./image/icon_3.png"),
    path: "check-record-record",
    bg: "#FFA273",
  },
  {
    name: "信息填报",
    icon: require("./image/icon_4.png"),
    path: "govern-result",
    bg: "#3DC018",
    hide: loginInfo.value?.roletype !== 5,
  },
  {
    name: "统计分析",
    icon: require("./image/icon_5.png"),
    path: "statistics",
    bg: "#FFD973",
  },
  {
    name: "我的任务",
    icon: require("./image/icon_1.png"),
    path: "task-list",
    bg: "#FF505A",
    hide: ![2, 3].includes(loginInfo.value?.roletype),
  },
  {
    name: "非现场监管",
    icon: require("./image/icon_7.png"),
    path: "supervise",
    bg: "#FFAE49",
    hide: loginInfo.value?.roletype === 5,
  },
]);

const toPage = (record) => {
  router.push({
    name: record.path,
  });
};

const onEdit = () => {
  editData.visible = true;
  editData.name = loginInfo.value?.nickName;
};
const onUnitEdit= () => {
  editData.unitvisible = true;
  editData.unitname = loginInfo.value?.unitname;
};
const onConfirm = async () => {
  if (!editData.name?.trim()) {
    Toast("请输入用户姓名");
    return;
  }
  try {
    const result = await updateUserName({
      name: editData.name,
    });
    if (result.succ) {
      editData.visible = false;
      await loginStore.setLoginInfo();
    } else {
      throw new Error(result);
    }
  } catch (e) {
    //
  }
};
const onUnitConfirm = async () => {
  if (!editData.unitname?.trim()) {
    Toast("请输入单位名称");
    return;
  }
  try {
    const result = await updateUnitName({
      name: editData.unitname,
    });
    if (result.succ) {
      editData.unitvisible = false;
      await loginStore.setLoginInfo();
    } else {
      throw new Error(result);
    }
  } catch (e) {
    //
  }
};
const getNumber = async () => {
  const result = await weekNoCheckHouse({
    xzqdm: loginInfo.value?.xzqdm,
    towndm: loginInfo.value?.towndm,
    villagedm: loginInfo.value?.villagedm,
  });

  if (!result?.data) return;

  Dialog.alert({
    message: `7天内未自查房屋数：${result?.data}`,
    confirmButtonText: "查看",
  }).then(() => {
    sessionStorage.setItem("isPopup", 1);
    router.push({
      name: "supervise-unchecked",
      query: {
        type: 'week'
      }
    });
  });
};

const changeRole = async () => {
  const result = await switchUser({ id: userInfo.value?.qaaId })
  if (result?.succ) {
    localStorage.setItem(process.env.VUE_APP_TOKEN_NAME, result?.data?.jwtToken)
    userStore.setUserInfo({
      ...result?.data,
      qaaId: userInfo.value?.qaaId,
    })
    await loginStore.setLoginInfo()
  }
}

watch(
  () => loginInfo.value,
  () => {
    if (
      [4, 5].includes(loginInfo.value?.roletype) &&
      +sessionStorage.getItem("isPopup") !== 1
    ) {
      getNumber();
    }
    if (loginInfo.value.nickName == null || loginInfo.value.unitName == null) {
      Dialog.alert({
        title: `消息提示`,
        message: `请完善您的用户姓名或所在单位`,
      }).then(() => {
        sessionStorage.setItem("isPopup", 1);
        router.push({
          name: "menu",
        });
      });
    }
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="less">
.menu {
  height: 100%;
  background: url(image/page_bg.png) no-repeat top center / 100% 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 32px;
  .tel {
    position: fixed;
    bottom: 32px;
    text-align: center;
  }
  h3 {
    font-size: 34px;
    margin-bottom: 24px;
  }
  h4 {
    margin: 0 32px;
    height: 40px;
    line-height: 40px;
    position: relative;
    i {
      margin-left: 32px;
      font-size: 32px;
    }
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 80px);
    margin: 40px 40px 0;
    gap: 24px;
    .item {
      width: calc(33.33% - 16px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 12px;
      .van-image {
        width: 98px;
        height: 98px;
      }
      p {
        flex: 1;
        height: 44px;
        line-height: 44px;
        color: #fff;
        text-align: center;
      }
    }
  }
  .popup-box {
    .title {
      display: flex;
      padding: 22px 32px;
      p {
        height: 44px;
        line-height: 44px;
        &:nth-of-type(1) {
          color: var(--time-color);
        }
        &:nth-of-type(2) {
          flex: 1;
          text-align: center;
        }
        &:nth-of-type(3) {
          background: var(--van-primary-color);
          color: #fff;
          width: 100px;
          text-align: center;
          height: 44px;
          line-height: 44px;
          border-radius: 8px;
        }
      }
    }
  }
  input {
    width: calc(100% - 64px);
    height: 80px;
    background: #f6f7f8;
    box-sizing: border-box;
    padding: 12px;
    font-size: 28px;
    color: var(--title-color);
    margin: 24px 32px 64px;
    line-height: 80px;
    &::placeholder {
      color: #bebebe;
      line-height: 80px;
    }
  }
  .change-role {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 90px;
    right: 32px;
    padding: 20px;
    border-radius: 50%;
    color: var(--van-primary-color);
    text-align: center;
    font-size: 32px;
  }
}
</style>
